function getSideColorName(side) 
{
	return (side == Side.RED) ? 'red' : ((side==Side.BLUE) ? 'blue' : 'neutral');
}

function getStateName(state)
{
    return (state == 0) ? 'initial' : (state == 1) ? 'moving' : (state == 2) ? 'attacking' : (state == 3) ? 'move' :       (state == 4) ? 'attack' : 'undefined';
}

function HierarkiaBoard(doc, ui){
    this.element = doc.createElement("div");
    this.element.className = "boardcontainer";
	this.board = doc.createElement("span");
	this.board.className = "hierarkiaboard-waiting";
	this.board.innerText = "Please login...";
	this.element.appendChild(this.board);
	
	function makeHierarkiaBoard(doc, player, game, fsm)
	{
        var hierarkia = game.hierarkia();
        var info = game.info;
		var board = doc.createElement('div');
		board.className = 'hierarkia-board';
        board.fsmstate = fsm.state;
	
		for(var y = 0; y < info.height; ++y)
		{
			var row = doc.createElement('div');
			row.className = "board-row";
			row.style.height = (100.0 / info.height) + "%";
			board.appendChild(row);
			
			for(var x = 0; x < info.width; ++x)
			{
				var hierarkiapiece = hierarkia.get(x, y);

                var cellcontainer = doc.createElement('span');
    			row.appendChild(cellcontainer);
    			cellcontainer.className = "board-cell";
				cellcontainer.style["width"] = (100.0 / info.width) + "%";

                function makePiece(doc, homezone, hierarkiapiece)
                {
                    var cell = doc.createElement('span');
                    cell.className = "cell";
                    cell.setAttribute('homezone', getSideColorName(homezone));
                    
                    var piece = doc.createElement('span');
                    cell.appendChild(piece);
                    piece.className = "piece";
                    piece.setAttribute('color', (hierarkiapiece) ? getSideColorName(hierarkiapiece.side) : 'empty');
                    
                    var piecedecoration = doc.createElement('span');
                    piecedecoration.className = "piece-decoration";
                    piece.appendChild(piecedecoration);

                    var valuecontainer = doc.createElement('span');
                    piecedecoration.appendChild(valuecontainer);
                    valuecontainer.className = "value-container";

                    var val = doc.createElement('span');
                    valuecontainer.appendChild(val);
                    val.className = "value";
                    val.innerHTML = (hierarkiapiece) ? hierarkiapiece.value : '&nbsp;';

                    return cell;
                }

				function makeClick(xx, yy) { return function(evt) { ui.cellClicked(xx, yy); }; }
				cellcontainer.onclick = makeClick(x, y);

                var piece = makePiece(doc, hierarkia.homezone(x, y), hierarkiapiece);				
				cellcontainer.appendChild(piece);

                if(hierarkia.isCaptured(x, y) && hierarkiapiece) piece.setAttribute('captured', true);
                if(hierarkia.isCaptor(x, y) && hierarkiapiece) piece.setAttribute('captor', true);
                if(hierarkia.isAttacking() && hierarkiapiece && hierarkia.isAttackingFrom(x, y)) piece.setAttribute('attackingfrom', true);
                if(hierarkia.isAttacking() && hierarkiapiece && hierarkia.isAttackingTo(x, y)) piece.setAttribute('attackingto', true);

		        switch(fsm.state)
                {
                    case UIState.INITIAL:
                        if(hierarkia.canMove(x, y) && hierarkiapiece && game.currentSide() == hierarkiapiece.side && player == game.currentPlayer()) piece.setAttribute('canmove', true);
                        break;

                    case UIState.MOVING:
                        if(x == fsm.from[0] && y == fsm.from[1]){
                            piece.setAttribute('selected', true);
                        }
                        
                        if(hierarkia.canMoveTo(fsm.from[0], fsm.from[1], x, y))
							piece.setAttribute('canmoveto', true);
                        if(hierarkia.canAttackTo(fsm.from[0], fsm.from[1], x, y))
							piece.setAttribute('canattackto', true);
                       break;
                    
                    case UIState.MOVE:
                        if(x == fsm.from[0] && y == fsm.from[1]) piece.setAttribute('movingfrom', true);
                        if(x == fsm.to[0] && y == fsm.to[1]) piece.setAttribute('movingto', true);
                        break;

					case UIState.ATTACKING:
						// TODO: the differennce between attack and destroy
                        if(x == fsm.from[0] && y == fsm.from[1]) piece.setAttribute('attackingfrom', true);
                        if(x == fsm.to[0] && y == fsm.to[1]) piece.setAttribute('attackingto', true);

						break;
                }
                
			} 
		}
		
		return board;
	}
	
	this.updateCurrentGame = function(player, game, fsm){
		var hierarkia = game.hierarkia();
		var table = makeHierarkiaBoard(this.element.ownerDocument, player, game, fsm);
		this.element.removeChild(this.board);
		this.board = table;
		this.element.appendChild(this.board);
	}
	
    this.updateGamesList = function(player, currentGameId, games) {}	
}

